<template>
    <div class="search">
        <div  class="h-100 d-flex w-100">
            <div :class="showRight ? 'w-80' : 'w-100'"  class="all-height" style=" background-color: white;" >
                <div class="h-100 ">
                    <div class="operation  d-flex-between-center" >
                        <div  class=" h-100 d-flex-align-center">
                            <Button @click="getDataList" >刷新</Button>
                            <Button type="dashed" @click="openTip=!openTip">{{ openTip ? "关闭提示" : "开启提示" }}</Button>
                            <Button type="primary"  @click="passList">批量通过</Button>
                            <Button  type="info" @click="backList">批量驳回</Button>
                        </div>
                        <div  class="mr-8" style="text-align: right">
                            <Icon color="#fff" class="icon01" :type=" showRight ? `ios-arrow-forward` : `ios-arrow-back` " @click.native="clickShowRight"></Icon>
                        </div>
                    </div>
                    <div v-show="openTip">
                        <Alert show-icon>
                            已选择 <span class="select-count">{{ selectList.length }}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </div>
                    <div class="calc-px-height">
                        <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
                               :height="height1"
                               @on-selection-change="changeSelect"
                        >
                            <template slot-scope="{row}" slot="action">
                                <div class="wh-100 d-flex-align-center fs-14" style="color: rgb(40, 115, 243)">
                                    <div class="mr-8 cursor-pointer" @click="reviewViewDetail(row)">详情</div>
                                    <div class="mr-8 cursor-pointer" @click="reviewPass(row)">通过</div>
                                    <div class="mr-8 cursor-pointer" @click="reviewReject(row)">驳回</div>
                                    <div class="mr-8 cursor-pointer" @click="reviewHistory(row)">历史</div>
                                </div>
                            </template>
                        </Table>
                    </div>
                    <div  class="page d-flex-around-center">
                        <Page :current="pages.pageNumber" :total="pages.total" :page-size="pages.pageSize"
                              @on-change="changePage"
                              @on-page-size-change="changePageSize" :page-size-opts="[10,20,50,100,200]" size="small" show-total
                              show-elevator
                              show-sizer>
                        </Page>
                    </div>
                </div>
            </div>
            <div  class="h-100  w-auto ml-8" v-show="showRight" style=" background-color: white;">
                <div v-if="isSearch" class="h-100  ">
                    <div class="wh-100"  @keydown.enter.native="handleSearch">
                        <div  class="ml-8 pt-12 fs-14  fw-6 ">
                            查询区
                        </div>
                        <Form ref="searchForm" :model="searchForm" :label-width="labelWidth100" class="pl-12 pr-12 pt-32 w-100 h-90">
                            <FormItem class=" w-100 "   label="姓名" prop="xm" >
                                <Input class=" w-100 "  type="text" v-model="searchForm.name" placeholder="请输入姓名" clearable />
                            </FormItem>

                            <FormItem class="w-100 "  label="考生号" prop="ksh" >
                                <Input class=" w-100"  type="text" v-model="searchForm.ksh" placeholder="请输入考生号" clearable />
                            </FormItem>
                            <FormItem class=" w-100"  label="学号" prop="xh" >
                                <Input class=" w-100"  type="text" v-model="searchForm.xh" placeholder="请输入学号" clearable />
                            </FormItem>
                            <FormItem class=" w-100"  label="身份证号" prop="sfzh" >
                                <Input class=" w-100"  type="text" v-model="searchForm.idCard" placeholder="请输入身份证号" clearable />
                            </FormItem>
                            <FormItem class=" w-100"  label="专业" prop="zy">
                                <Input class=" w-100"  type="text" v-model="searchForm.zy" placeholder="请输入专业名称" clearable/>
                            </FormItem>
                            <FormItem v-if='resource === "1" || resource === "0"' label="学校" prop="schoolName"  class=" w-95">
                                <Input type="text" v-model="searchForm.gxmc" placeholder="请输入院校名称" clearable style="width: 100%"/>
                            </FormItem>
                            <FormItem class=" w-100" label="院系" prop="yxmc">
                                <Input class=" w-100"  type="text" v-model="searchForm.yxmc" placeholder="请输入院系名称" clearable/>
                            </FormItem>
                            <FormItem class=" w-100" label="学历" prop="xlCode" >
                                <Select clearable  v-model="searchForm.xlcc" placeholder="请选择学历" class="w-100">
                                    <Option v-for="(item,index) in xlList" :value="item.value" :key="index">{{ item.title }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem class="w-100" label="户口迁转类型" prop="transferType" >
                                <Select  clearable v-model="searchForm.houseTransferTypeCode" placeholder="请选择户口迁转类型" class="w-100">
                                    <Option v-for="(item,index) in accountTypeList" :value="item.value" :key="index">{{ item.title }}</Option>
                                </Select>
                            </FormItem>
<!--                            <FormItem label="户口登记状态" prop="status" class=" w-95">-->
<!--                                <Select   v-model="searchForm.status" clearable placeholder="请选择档案登记状态" class="w-100">-->
<!--                                    <Option value="1">待填报</Option>-->
<!--                                    &lt;!&ndash;                                <Option value="2">草稿</Option>&ndash;&gt;-->
<!--                                    <Option value="3">审核中</Option>-->
<!--                                    &lt;!&ndash;                                <Option value="4">已撤回</Option>&ndash;&gt;-->
<!--                                    &lt;!&ndash;                                <Option value="5">已驳回</Option>&ndash;&gt;-->
<!--                                    <Option value="6">已登记</Option>-->
<!--                                </Select>-->
<!--                            </FormItem>-->

                            <FormItem class=" w-100" label="毕业时间" prop="bysj" >
                                <DatePicker clearable v-model="searchForm.bysj" @on-change="dateChange" type="month" placeholder="毕业时间" ></DatePicker>
                            </FormItem>
                            <FormItem class=" w-100" label="生源所在地" prop="unitLocation" >
                                <el-cascader
                                    clearable
                                    class="w-100"
                                    v-model="searchForm.houseTransferLocationCode"
                                    :options="locationOfTheUnitList"
                                    :props="provincesAndMunicipalitiesProps"
                                    @change="changeCar"
                                ></el-cascader>
                            </FormItem>

                            <FormItem class="br box-key">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
                <div v-else class="wh-100   ">
                    <div  class="ml-8 pt-12 fs-14  fw-6">
                        {{ rightTitle }}
                    </div>
                    <Form ref="searchForm"   :model="rightData" inline :label-width="labelWidth80" class=" mr-12 mt-32">
                        <FormItem class=" w-100 "   label="审核意见" prop="xm" >
                            <Input  maxlength="50" v-model="rightData.comment" show-word-limit type="textarea" :rows="4" placeholder="请输入审核意见" />
                        </FormItem>
                        <FormItem class="w-100 "  label="消息通知" prop="ksh" >
                            <CheckboxGroup v-model="rightData.send" >
                                <Checkbox label="1">站内信通知</Checkbox>
<!--                                <Checkbox class="ml-12" label="2">短信通知</Checkbox>-->
                            </CheckboxGroup>
                        </FormItem>
                        <FormItem  class="br d-flex-around-center">
                            <div>
                                <Button  v-loading="submitLoadings" type="primary" @click="submitRight">提交</Button>
                                <Button @click="isSearch=true" type="default">取消</Button>
                            </div>
                        </FormItem>
                    </Form>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import {
    accountTransferBack,
    accountTransferPass, backListApi,
    getTodoListData, passListApi
} from '../../api/accountManagement/accountManagementApis';
import { newProvincialDataApi } from '../../api/bys';
import { getDictDataByType } from '../../api';
import { areaDataApi } from '../../api/common';

export default {
    name: 'accountReview',
    data(){
        return {
            labelWidth80: 80,
            labelWidth100: 100,
            isSearch: true,
            importing: false,
            submitLoadings: false,
            importFormView:false,
            importForm: {
                file: null,
                importMode: '1',
            },
            openTip: true, // 显示提示
            loading: true, // 表单加载状态
            height1: 0,
            pages : {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            searchForm: { // 搜索框初始化对象
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
            },
            selectList: [], // 多选数据
           
            columns: [],
            columns_1: [
                // 表头
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    type: "index",
                    title:"序号",
                    width: 60,
                    align: "center"
                },
                {
                    title: "院校名称",
                    key: "gxmc",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "院系名称",
                    key: "yxmc",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "专业",
                    key: "zy",
                    minWidth: 120,
                    sortable: false,
                },
                {
                    title: "姓名",
                    key: "name",
                    minWidth: 100,
                    sortable: false,
                },
                {
                    title: "身份证号",
                    key: "idCard",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "考生号",
                    key: "ksh",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    title: "学号",
                    key: "xh",
                    minWidth: 140,
                    sortable: false,
                },
                {
                    // title: "户口迁转类型代码",
                    title: '户口迁转类型',
                    key: 'houseTransferTypeCode',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.accountTypeList.find(item => item.value == params.row.houseTransferTypeCode).title);
                    }
                },
                {
                    title: '户口迁转地址',
                    key: 'houseTransferAddr',
                    minWidth: 120,
                    sortable: false
                },
                {
                    // title: "户口迁转所在地代码",
                    title: '户口迁转所在地',
                    key: 'houseTransferLocationCode',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.areaList.find(item => item.code == params.row.houseTransferLocationCode.split(',')[2]).allName);
                    }
                },
                {
                    title: "申请时间",
                    key: "applyTime",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "当前审批环节",
                    key: "currentTaskName",
                    align: "center",
                    minWidth: 120,
                    fixed:"right",
                },
                {
                    title: "操作",
                    slot: "action",
                    align: "center",
                    minWidth: 190,
                    fixed:"right",
                }
            ],
            data: [
                {}
            ], // 表单数据
            total: 0, // 表单数据总数
            height: 510,
            showRight: true,
            rightTitle: "审核通过",
            rightData: {
                comment: "",
                sendMessage:false,
                send: [  ],
            },
            rowData: {},
            xlList: [],
            accountTypeList: [], // 户口转寄类型
            locationOfTheUnitList: [], // 单位所在地
            // 省市区级联
            provincesAndMunicipalitiesProps: {
                label: 'name',
                value: 'code',
                children: 'children'
            },
            resource: '',
            areaList: [],
        };
    },
    methods: {
        async getareaData() {
            let res = await areaDataApi()
            if(res.code === 200){
                this.areaList = res.result
                console.log("this.areaList",this.areaList)
            }
        },
        passList(){
            this.$Modal.confirm({
                title: "确认通过",
                // 记得确认修改此处
                content: "您确认要批量通过这些数据?",
                loading: true,
                onOk: () => {
                    passListApi(this.selectList).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        backList(){
            this.$Modal.confirm({
                title: "确认驳回",
                // 记得确认修改此处
                content: "您确认要批量驳回这些数据?",
                loading: true,
                onOk: () => {
                    backListApi( this.selectList).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        changeCar(){
            this.searchForm.sydCode = this.searchForm.houseTransferLocationCode[2];
        },
        dateChange(data){
            this.searchForm.bysj=data.split("-")[0]+data.split("-")[1]
            if(!(data.length>0)){
                this.searchForm.bysj=""
            }
        },
        newObtainTheCascadingDataOfProvincesAndCities(){
            newProvincialDataApi().then((res) =>{
                this.locationOfTheUnitList = res.result;
                console.log("this.locationOfTheUnitList",this.locationOfTheUnitList)
            })
        },
        obtainTheAccountMigrationType(){
            getDictDataByType('household-transfer-type').then(res => {
                if(res.code === 200){
                    this.accountTypeList=res.result
                }
            });
        },
        async getxlList() {
            let res= await getDictDataByType('eduLevelType')
            if (res.code === 200) {
                this.xlList = res.result
            }
        },
        selectListMe(){
            this.newObtainTheCascadingDataOfProvincesAndCities()
            this.obtainTheAccountMigrationType();
        },
        async init() {
            await this.getxlList();
            await this.getareaData();
            this.getDataList();
            this.selectListMe();

        },
        reviewViewDetail(row) {
            this.$router.push({
                name: "AccountReviewInfo",
                params: {
                    row: row,
                },
            });
        },
        reviewPass(row) {
            this.isSearch = false;
            this.rightTitle = "审核通过";
            this.rowData = row;
        },
        reviewReject(row) {
            this.isSearch = false;
            this.rightTitle = "审核驳回";
            this.rowData = row;
        },
        submitRight(){
            this.submitLoadings = true;
            if(this.rightTitle === "审核通过") {
                for(let i=0;i<this.rightData.send.length;i++){
                    if(this.rightData.send[i] == 1){
                        this.rightData.sendMessage = true;
                    }
                }
                accountTransferPass({taskId:this.rowData.id,comment:this.rightData.comment,sendMessage:this.rightData.sendMessage,procInstId:this.rowData.procInstId,applyUserId:this.rowData.applyerUserid}).then(res => {
                    if(res.code === 200){
                        this.$message.success("审核通过成功");
                        this.isSearch = true;
                        this.submitLoadings = false;
                        this.getDataList();
                    }
                })
            }
            if(this.rightTitle === "审核驳回") {
                for(let i=0;i<this.rightData.send.length;i++){
                    if(this.rightData.send[i] == 1){
                        this.rightData.sendMessage = true;
                    }
                }
                accountTransferBack({taskId:this.rowData.id,comment:this.rightData.comment,sendMessage:this.rightData.sendMessage,procInstId:this.rowData.procInstId,applyUserId:this.rowData.applyerUserid}).then(res => {
                    if(res.code === 200){
                        this.$message.success("审核驳回成功");
                        this.isSearch = true;
                        this.submitLoadings = false;
                        this.getDataList();
                    }
                })
            }
        },
        reviewHistory(row) {
            this.$router.push({
                name: "AccountReviewHistory",
                query: {
                    userId: row.applyerUserid,
                },
            });
        },
        // 显示隐藏右侧区域
        clickShowRight() {
            this.showRight = !this.showRight
        },
        changePage(v) {
            this.pages.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.pages.pageSize = v;
            this.getDataList();
        },
        handleSearch() {
            this.pages.pageNumber = 1;
            this.pages.pageSize = 50;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.pages.pageNumber = 1;
            this.pages.pageSize = 50;
            // 重新加载数据
            this.getDataList();
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changeSelect(e) {
            this.selectList = e;
        },
        getDataList() {
            this.loading = true;
            getTodoListData({ ...this.searchForm,...this.pages }).then(res => {
                console.log(res);
                this.data = res.result.result;
                this.pages.total = res.result.total;
                this.loading = false;
            })

        },
        onRestWindow() {
            this.columns = this.restTableCellWidth(this.columns_1)
            this.labelWidth80 = this.searchLabelWidth(this.labelWidth80)
            this.labelWidth100 = this.searchLabelWidth(this.labelWidth100)
        },
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
};
</script>
<style scoped lang="less">

/deep/ .ivu-table-body{
    // height: 90.6% !important;
}
//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.01rem !important;
}

.calc-px-height {
    height: calc(100% - 170px);

    .ivu-table-wrapper {
        height: 100% !important;
    }
}

.search {
    width: 100%;
    height: 100%;

    .operation {
        padding-top: 2vh;
        margin-bottom: 2vh;
    }

    .select-count {
        font-weight: 600;
        color: #40a9ff;
    }

    .select-clear {
        margin-left: 10px;
    }

    .page {
        margin-top: 2vh;
    }

    .drop-down {
        margin-left: 5px;
    }
}

.icon01 {
    background:rgb(45, 154, 244);border-radius: 50%;padding: 3px 
}
.cml-35 {
    margin-left:-35px;
}


@media (max-width: 1920px) {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
        height: 94% !important;
    }
    /deep/ .ivu-table-body {
        height: 94%;
    }
}

@media (min-width: 1921px) and (max-width: 3840px) {

    /deep/ .ivu-table-body {
        height: 93%;
        
    }
}

// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 150px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: 0.12rem !important;
    .ivu-form-item-content {
        display: flex;
    }
}
/deep/ .ivu-input-type-textarea,/deep/ .ivu-input {
    height: calc(100% - 7px) !important;
}
.flex-1 {
    height: 100%;
}
/deep/ .ivu-drawer-body {
    overflow: hidden;
    .d-flex-align-center {
        height: fit-content !important;
        margin-left: 0 !important;
        justify-content: right;
        box-sizing: border-box;
        padding-right: 7px;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 97px !important;
    }
}
</style>